<script setup>
import { reactive, ref } from 'vue';
import { deleteTplSettingById, getTplSettings } from '@/api/tpl.js';
import { useGlobalAbility } from '@/mixins/getGlobalAbility.js';
import FontEditDialog from '@/views/personalCenter/components/systemModule/components/fontEditDialog/fontEditDialog.vue';

const { $message } = useGlobalAbility();

const $emit = defineEmits(['close']);
const props = defineProps({
  tplCode: {
    type: String,
    default: '',
  },
});
function closeDialog() {
  $emit('close');
}
const tableData = ref([]);
const columns = [
  { prop: 'tagName', label: '模板名称' },
  { prop: 'fontFamily', label: '字体' },
  { prop: 'fontSize', label: '字体大小' },
  { prop: 'fontColor', label: '字体颜色' },
  { prop: 'isBold', label: '是否加粗' },
  { prop: 'lineSpace', label: '行间距' },
  { prop: 'beforeSpace', label: '段前间距' },
  { prop: 'afterSpace', label: '段后间距' },
  { prop: 'operate', label: '操作', slot: true, minWidth: 200 },
];
// 获取列表
async function getTableData() {
  const returnData = await getTplSettings({ tplCode: props.tplCode });
  if (returnData?.code === 200) {
    tableData.value = returnData?.data;
  }
}
getTableData();
// 删除模版
async function deleteTpl(item) {
  const returnData = await deleteTplSettingById({ id: item.id });
  if (returnData?.code === 200) {
    $message.success('删除成功');
    await getTableData();
  } else {
    $message.error(returnData?.msg);
  }
}
// 编辑模板
const showEditDialog = ref(false);
let editData = reactive({});
function editTpl(row) {
  Object.assign(editData, row);
  showEditDialog.value = true;
}
// 新增模板
function addTpl() {
  editData = reactive({tplCode: props.tplCode});
  showEditDialog.value = true;
}
// 关闭字体设置弹窗
function fontEditClose(value) {
  showEditDialog.value = false;
  if (value) {
    getTableData();
  }
}
</script>

<template>
  <el-dialog :model-value="true" title="字体设置" @close="closeDialog" class="font-set-dialog">
    <div class="content">
      <el-table :data="tableData" border size="small">
        <template v-for="(item, index) in columns" :key="index">
          <el-table-column :prop="item.prop" :label="item.label" :min-width="item.minWidth || 0">
            <template v-if="item.slot" #default="{ row }">
              <el-button type="text" @click="deleteTpl(row)">删除</el-button>
              <el-button type="text" @click="editTpl(row)">编辑</el-button>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div class="add-btn-box">
        <el-button @click="addTpl" type="primary">新增字体设置</el-button>
      </div>
    </div>
  </el-dialog>
  <FontEditDialog v-if="showEditDialog" @close="fontEditClose" :data="editData" />
</template>

<style scoped lang="less">
@import './fontSet.less';
</style>
